<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library CSS, iOS Theme -->
    <link rel="stylesheet" href="dist/css/framework7.ios.min.css">
    <!-- Path to Framework7 color related styles, iOS Theme -->
    <link rel="stylesheet" href="dist/css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="dist/css/my-app.css">
    <!--<link rel="stylesheet" href="css/drag.css">-->
    <link rel="stylesheet" href="css/ft-slider.css" />
    <style>
        body {
            background: #1f1e1e;
            font-family: "微软雅黑";
            color: #fff;
        }

        button {
            display: inline-block;
            padding: 6px 12px;
            line-height: 1.4;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #fff;
            background-color: #5bc0de;
            border-color: #46b8da;
            cursor: pointer;
            font-size: 15px;
        }

        .result-wrap,
        .btn-wrap {
            height: 40px;
            line-height: 40px;
            float: left;
            margin-top: 20px;
        }

        .result-wrap {
            margin-left: 20px;
        }

        .container {
            margin: 20px;
            height: 140px;
        }
    </style>
</head>
<body>
<div class="views">
    <div class="view view-main">
        <div class="pages">
            <div data-page="index" class="page">
                <div class="page-content">
                <!--    <div class="content-block">
                        <p><a href="#" class="alert-text">Alert With Text</a></p>
                        <p><a href="#" class="alert-text-title">Alert With Text and Title</a></p>
                        <p><a href="#" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
                        <p><a href="#" class="alert-text-callback">Alert With Text and Callback</a></p>
                    </div>-->
                    <div class="content-block">
                        <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
                        <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
                        <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
                        <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
                    </div>

                    <h3>请在移动端查看效果pc端无法拖拽</h3>
                    <div class="container">
                        <div id="slider1"></div>
                        <div class="btn-wrap"><button id="btn1">还原</button></div>
                        <div class="result-wrap">验证结果：<span id="result1"></span></div>
                    </div>

                    <div class="container">
                        <div id="slider2"></div>
                        <div class="btn-wrap"><button id="btn2">还原</button></div>
                        <div class="result-wrap">验证结果：<span id="result2"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
<!--<script type="text/javascript" src="js/drag.js"></script>-->
<!--<script type="text/javascript">-->
    <!--$$('#drag').drag();-->
<!--</script>-->


<script src="js/ft-slider.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var result1 = document.getElementById("result1");
    var result2 = document.getElementById("result2");

    var slider1 = new FtSlider({
        id: "slider1",
        callback: function(res) {
            result1.innerHTML = res;
        }
    });

    var slider2 = new FtSlider({
        id: "slider2",
        width: 320,
        height: 36,
        textMsg: "拖动滑块到右边",
        successMsg: "验证成功了哦",
        callback: function(res) {
            result2.innerHTML = res;
        }
    });

    btn1.onclick = function() {
        slider1.restore();
        result1.innerHTML = "false";
    }

    btn2.onclick = function() {
        slider2.restore();
        result2.innerHTML = "false";
    }
</script>
</body>
</html>